require(['jquery','template','bootstrapPaginator','bootstrapValidator','jqueryFileupload'], function ($,template) {
    $(function () {
        // 1.动态渲染表格数据
        var page = 1, pageSize = 5
        var imgs = []
        function render() {
            $.ajax({
                url: '/product/queryProductDetailList',
                type: 'get',
                data: {
                    page: page,
                    pageSize: pageSize
                },
                success: function (info) {
                    $('tbody').html(template('tmp', info))
                    $('.page_box ul').bootstrapPaginator({
                        bootstrapMajorVersion: 3,
                        currentPage: page,
                        totalPages: Math.ceil(info.total / info.size),
                        itemTexts: function (type, page, current) {
                            switch (type) {
                                case 'first':
                                    return '首页'
                                case 'prev':
                                    return '上一页'
                                case 'page':
                                    return page
                                case 'next':
                                    return '下一页'
                                case 'last':
                                    return '尾页'
                            }
                        },
                        tooltipTitles: function (type, page, current) {
                            switch (type) {
                                case 'first':
                                    return '首页'
                                case 'prev':
                                    return '上一页'
                                case 'page':
                                    return '第' + page + '页'
                                case 'next':
                                    return '下一页'
                                case 'last':
                                    return '尾页'
                            }
                        },
                        useBootstrapTooltip: true,
                        onPageChanged: function (event, oldPage, newPage) {
                            page = newPage
                            render()
                        }
                    })
                }
            })
        }
    
        render()
    
        // 2. 点击`添加商品`按钮
        $('.btn-addProduct').on('click', function () {
            $('#addProduct_modal').modal('show')
            // 3.动态渲染二级分类数据
            $.ajax({
                url: '/category/querySecondCategoryPaging',
                type: 'get',
                data: {
                    page: 1,
                    pageSize: 100
                },
                success: function (info) {
                    $('.dropdown-menu').html(template('tmp2', info))
                }
            })
        })
    
        // 4.二级分类点击存id
        $('.dropdown-menu').on('click', 'a', function () {
            $('.SeCate-text').html($(this).html())
            // 存id
            $('[name=brandId]').val($(this).data('id'))
            // 改变验证状态
            $('form').data('bootstrapValidator').updateStatus('brandId', 'VALID')
        })
    
        // 5.表单验证
        $('form').bootstrapValidator({
            excluded: [],
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                brandId: {
                    validators: {
                        notEmpty: {
                            message: '请选择二级分类'
                        }
                    }
                },
                proName: {
                    validators: {
                        notEmpty: {
                            message: '请填写商品名称'
                        }
                    }
                },
                proDesc: {
                    validators: {
                        notEmpty: {
                            message: '请填写商品描述'
                        }
                    }
                },
                num: {
                    validators: {
                        notEmpty: {
                            message: '请填写商品库存'
                        },
                        regexp: {
                            regexp: /^[1-9]\d{0,4}$/,
                            message: '请输入正确的库存'
                        }
                    }
                },
                size: {
                    validators: {
                        notEmpty: {
                            message: '请填写商品尺码'
                        },
                        regexp: {
                            regexp: /^[0-9]{2}-[0-9]{2}$/,
                            message: '格式错误:如[32-46]'
                        }
                    }
                },
                oldPrice: {
                    validators: {
                        notEmpty: {
                            message: '请填写商品原价'
                        },
                        regexp: {
                            regexp: /^\d+[0-9.]*$/,
                            message: '格式错误: 请输入数字'
                        }
                    }
                },
                price: {
                    validators: {
                        notEmpty: {
                            message: '请填写商品价格'
                        },
                        regexp: {
                            regexp: /^\d+[0-9.]*$/,
                            message: '格式错误: 请输入数字'
                        }
                    }
                },
                validPlace: {
                    validators: {
                        notEmpty: {
                            message: '请上传3张图片'
                        }
                    }
                }
            }
        })
    
        // 6.文件上传
        $("#file").fileupload({
            done: function (e, data) {
                if (imgs.length === 3) return
                // 显示图片
                imgs.push(data.result)
                $('.img-box').append($('<img src="' + data.result.picAddr + '" style="width:80px;height:80px;display:inline-block">'))
                if (imgs.length === 3) {
                    $('form').data('bootstrapValidator').updateStatus('validPlace', 'VALID')
                } else {
                    $('form').data('bootstrapValidator').updateStatus('validPlace', 'INVALID')
                }
            }
        })
    
        // 7.验证通过
        $('form').on('success.form.bv', function (e) {
            e.preventDefault()
            console.log(imgs)
            var data = $('form').serialize()
            data += '&picName1=' + imgs[0].picName + '&picAddr1=' + imgs[0].picAddr
            data += '&picName2=' + imgs[1].picName + '&picAddr2=' + imgs[1].picAddr
            data += '&picName3=' + imgs[2].picName + '&picAddr3=' + imgs[2].picAddr
            $.ajax({
                url: '/product/addProduct',
                type: 'post',
                data: data,
                success: function (info) {
                    if (info.success) {
                        $('form').data('bootstrapValidator').resetForm(true)
                        $('.img-box img').remove()
                        imgs = []
                        $('.SeCate-text').html('请选择二级分类')
                        $('#addProduct_modal').modal('hide')
                        page = 1
                        render()
                    }
                }
            })
        })
    })
})